//函数组件
import React, { useEffect, useState } from "react";
import { Button } from "antd-mobile";
function App() {
  const [age, setAge] = useState(1);
  //年龄每次+1
  const add = () => {
    setAge(age + 1);
  };
  //火车列表
  const train = [
    {
      id: 1,
      type: "高铁",
      url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.8tlwbGsJvlNZwGAGL36W8AHaFS&w=127&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.8&pid=3.1&rm=2",
    },
    {
      id: 2,
      type: "火车",
      url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.a84JB-77ysZhMACPpuM6XgHaEo&w=151&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.8&pid=3.1&rm=2",
    },
    {
      id: 3,
      type: "高铁",
      url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.8tlwbGsJvlNZwGAGL36W8AHaFS&w=127&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.8&pid=3.1&rm=2",
    },
  ];
  //中转列表
  const trainList = [
    {
      id: 1,
      type: "北京",
      url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.HCTceWWsoEAn46iio3AgigHaJQ&w=80&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.8&pid=3.1&rm=2",
    },
    {
      id: 2,
      type: "上海",
      url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.a84JB-77ysZhMACPpuM6XgHaEo&w=151&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.8&pid=3.1&rm=2",
    },
    {
      id: 3,
      type: "深圳",
      url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.DOOxGtkUiW8QevWtAxsRtAHaEK&w=200&h=110&c=8&rs=1&qlt=90&o=6&dpr=1.8&pid=3.1&rm=2",
    },
  ];

   //标识
   let [flag,setFlag]=useState(true)
   //跳转到中转列表
   const goother=()=>{
    setFlag(false)
    
   }
   //跳转到火车列表
   const goTrain=()=>{
    setFlag(true)
   
   }

   //定义一个数组
   let arr =[4,4,1,1,1,2,2,2,2,3]

   //封装一个函数
   function unique(){
      //去重
      let uniqueNum=arr.filter((item,index)=>arr.indexOf(item)===index)
      //排序
      let newNum=uniqueNum.sort((x,y)=>{
        return x-y
      })
      console.log(newNum)//输出[1,2,3,4]
      console.log(typeof newNum)//打印返回值类型
   }
useEffect(()=>{
   unique()//调用函数
})
  return (
    <div>
      <h3>{age}</h3>
      <Button color="primary" fill="solid" onClick={add}>
        +1
      </Button>

     <p>
        <Button color="primary" fill="solid" onClick={goTrain}>
        火车
      </Button>
        <Button color="primary" fill="solid" onClick={goother} style={{marginLeft:'10px'}}>
       中转
      </Button>
     </p>
    


       {/* 判断列表 */}
        {
          flag ?
           train.map((item) => {
          return (
            <dl key={item.id}>
              <dt>
                <img src={item.url} alt="" width={100} height={100}/>
              </dt>
              <dd>
                <h3>{item.type}</h3>
              </dd>
            </dl>
          );
        })
        : 
        trainList.map((item) => {
          return (
            <dl key={item.id}>
              <dt>
                <img src={item.url} alt="" width={100} height={100}/>
              </dt>
              <dd>
                <h3>{item.type}</h3>
              </dd>
            </dl>
          );
        })
        }
      </div>
    
  );
}

export default App;
